import React, { useState, useEffect } from 'react'
import {
    View,
    Text,
    ScrollView,
    ImageBackground,
    StyleSheet,
    Image,
    AsyncStorage,
    TouchableOpacity
} from 'react-native'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'


const Post = () => {

    const [list, setList] = useState([]);
    const [name, setName] = useState('无敌可爱');
    const dongtai = []

    const getName = async () => {
        let data = await AsyncStorage.getItem('name');
        data = JSON.parse(data);
        setName(data);
    }

    useEffect(() => {
        getName()
        AsyncStorage.getItem('dongtai').then(res => {
            let data = JSON.parse(res)
            let len = data.length
            for (var i = 0; i < len; i++) {
                console.log(name)
                if (data[i].name == name) {
                    dongtai.push(data[i])
                    console.log(i)
                }
            }
            setList(dongtai)
            console.log(list)
        })
    }, [])


    return (
        <View style={styles.container1}>
            <ScrollView id="container" style={styles.container}>
            {
                list.map((item, key) => (
                    <View key={key} id={item.id} style={{ marginTop: 15, backgroundColor: 'white' }}>
                        <View style={styles.part1}>
                            <Image style={styles.avatar} resizeMode="stretch" source={item.pic} />
                            <Text id="name" id="name" >{item.name}</Text>
                        </View>
                        <View style={styles.part2}>
                            <Text id="article" style={styles.article}>{item.content}</Text>
                        </View>
                        <View style={styles.part3}>
                            {
                                item.list.map((index, key) => {
                                    if(item.flag == true){
                                        return <Image id="conImg" style={styles.conImg} source={{ uri: index }} key={key} />
                                    }else{
                                        return <Image id="conImg" style={styles.conImg} source={index} key={key} />
                                    }
                                })
                            }
                        </View>
                        <View style={styles.part4}>
                            <View style={styles.part41}>
                                <View style={styles.bestCom}>
                                    {
                                        !item.shenP ? null : <Icon name="baby-face-outline" style={styles.face} size={30} />
                                    }
                                    {
                                        !item.shenP ? <Text style={{ fontSize: 17, color: '#fff', marginLeft: 2 }}>召唤神评</Text> : <Text style={{ fontSize: 17, color: '#fff', marginLeft: 2 }}>神评</Text>
                                    }

                                </View>
                            </View>
                            {
                                !item.shenP ? null : <View style={styles.part42}>
                                    <Text id="article" style={styles.article1}>{item.shenP}</Text>
                                </View>
                            }
                        </View>
                        <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
                            <Icon name="comment-text-outline" style={{ color: 'black' }} size={36}
                                onPress={() => { navigation.navigate('comments', { id: item.id }) }} />
                            <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginLeft: 14, marginRight: 20, marginBottom: 8 }}>
                                <TouchableOpacity onPress={async () => {
                                    let help = [...list];
                                    help.forEach((v) => {
                                        if (v.id == item.id) {
                                            if (v.isLike == true) {
                                                v.good--;
                                            } else {
                                                v.good++;
                                            }
                                                v.isLike = !v.isLike;
                                            }
                                        })
                                        setList(help);
                                        await saveData(list);
                                    }}>
                                    <Icon name={item.isLike ? 'arrow-up-thick' : 'arrow-up-bold-outline'} size={36} />
                                </TouchableOpacity>

                                <Text style={{ fontSize: 18, marginLeft: 6, color: 'black' }}>{item.good}</Text>
                            </View>
                        </View>
                    </View>
                ))
            }
            </ScrollView>
        </View>
    )
}


const styles = StyleSheet.create({
    container1: {
        flex: 1,
    },
    bestCom: {
        width: 80,
        backgroundColor: '#FF7A87',
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 20,
        paddingLeft: 3,
        marginBottom: 10
    },
    face: {
        color: '#FDE702'
    },
    container: {
        flex: 1,
        margin: 0,
        padding: 0,
        backgroundColor: '#eee',
    },
    part1: {
        paddingLeft: 20,
        paddingTop: 16,
        paddingBottom: 8,
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 10
    },
    part2: {
        paddingTop: 8,
        paddingLeft: 20,
        paddingBottom: 8,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    part3: {
        width: '90%',
        paddingLeft: 20,
        paddingTop: 8,
        paddingBottom: 8,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'center',
        backgroundColor: '#fff'
    },
    part4: {
        width: '90%',
        backgroundColor: '#F5F5F7',
        marginTop: 20,
        marginBottom: 20,
        padding: 10,
        // borderTopRightRadius:20,
        // borderTopLeftRadius:20,
        marginLeft: '5%',
        borderRadius: 10
    },
    part41: {
        // backgroundColor:'blue',
        flexDirection: 'row',
        alignItems: 'center',
    },
    part42: {
        // backgroundColor:'blue',
        flexDirection: 'row',
        alignItems: 'center',
    },
    part43: {
        width: '100%',
        flexDirection: 'row',
        flexWrap: 'wrap',
        paddingTop: 20,
        justifyContent: 'center'
    },
    arrowup: {
        color: '#3C94CD',
        marginLeft: 10
    },
    arrowdown: {
        color: '#3C94CD',
        marginLeft: 6
    },
    avatar: {
        // backgroundColor:'blue', 
        width: 40,
        height: 40,
        borderRadius: 200
    },
    name: {
        marginLeft: ptd(12),
        fontSize: 19,
        color: '#5A5B5F'
    },
    article: {
        fontSize: 20,
        width: '95%'
    },
    article1: {
        fontSize: 18,
        width: '100%'
    },
    conImg: {
        //backgroundColor:'yellow',
        width: 145,
        height: 145,
        borderRadius: 8,
        marginRight: 6,
        marginBottom: 3,
        borderColor: '#ddd',
        borderWidth: 1
    },
    txtBox: {
        width: '100%',
        height: 40,
        marginBottom: 5,
        backgroundColor: '#F5F5F7',
        flexDirection: 'row'
    },
    txtInput: {
        width: '85%',
        backgroundColor: '#fff',
        borderRadius: 20,
        marginLeft: 5,
    },
    txtBtn: {
        width: 45,
        height: 30,
        backgroundColor: 'skyblue',
        marginTop: 5,
        marginLeft: 5,
        borderRadius: 10,
    },
    btnTxt: {
        textAlign: "center",
        lineHeight: 30,
        color: '#fff',
        fontSize: 18
    }
})


export default Post
